<template>
  <div class="userCenter">
    <scroll class="user-scroll" :data="goodsList" :probeType="3" ref="scroll" :listenScroll="true" @scroll="scroll" :pullup="true" @scrollToEnd="loadMore">
      <div>
        <!-- 用户头部信息 -->
        <div class="user-header">
          <div class="user-info" @click="toProfile">
            <div class="user-image">
              <img :src="userInfo.userIcon" v-if="userInfo && userInfo.userIcon">
              <img src="//pinduoduoimg.yangkeduo.com/avatar/default/10.png@128w_1l_70Q_50sh.webp">
            </div>
            <div class="user-name">
              <span v-if="userInfo">{{userName}}</span>
              <span v-else>登录/注册</span>
              <i class="iconfont icon-weibiaoti1" style=" font-size: .19rem;color: #12b7f6;"></i>
            </div>
            <div class="btn">
              <span>
                <van-icon name="receive-gift" style="margin-right:0.05rem; color:#e02e24;" />今日满返</span>
            </div>
          </div>
          <div class="pincard-entrance">
            <span>拼单卡权益</span>
            <span class="info-list">
              <img src="//t00img.yangkeduo.com/t07img/images/2018-06-20/cf471f05210954023716c732a7b974de.jpeg?imageMogr2/quality/70" alt="">
              <img src="//t00img.yangkeduo.com/t05img/images/2018-07-01/2fdc5ee33740a1a76486b7f30b3828c5.jpeg?imageMogr2/quality/70" alt="">
              <img src="//t00img.yangkeduo.com/t02img/images/2018-06-22/6b43ee4b6cc8f27daa0033d470002aa0.jpeg?imageMogr2/quality/70" alt="">
              <span>御泥坊75折
                <van-icon name="arrow" />
              </span>
            </span>
          </div>
        </div>

        <!-- 订单图标列表 -->
        <div class="user-order">
          <van-cell title="我的订单" is-link value="查看全部" :border="false" @click="toOrders" />
          <div class="menu">
            <div class="menu-item" v-for="item in orderIcons">
              <van-icon style="font-size: .24rem; color: #9c9c9c;" :name="item.icon" />
              <p>{{item.name}}</p>
            </div>
          </div>
        </div>

        <!-- 中间图标列表 -->
        <div class="middle-wrapper">
          <div class="menu">
            <div class="menu-item" v-for="item in middleIcons" @click="toLink(item.link)">
              <van-icon style="font-size: .24rem; color: #e02e24;" :name="item.icon" :class="item.icon" />
              <p>{{item.name}}</p>
            </div>
          </div>
        </div>

        <!-- 底部图标列表 -->
        <div class="bottom-wrapper">
          <div class="bottom-menu">
            <div class="bottom-menu-item" v-for="item in bottomIcons" @click="toLink(item.link)">
              <van-icon style="font-size: .24rem; color: #ff7100;" :name="item.icon" :class="item.icon" />
              <p>{{item.name}}</p>
            </div>
          </div>
        </div>
        <!-- 个人中心精选推荐 -->
        <choiceness-goods :hasMore="hasMore" :goodsList="goodsList"></choiceness-goods>
      </div>
    </scroll>
    <go-top @toTop="toTop" :scrollY="scrollY"></go-top>
  </div>
</template>

<script>
import choicenessGoods from "../../components/choicenessGoods/choiceness";
import scroll from "../../common/scroll";
import { recproductList } from "../../api/getDatas";
import goTop from "../../components/goTop/goTop";

export default {
  components: {
    choicenessGoods,
    scroll,
    goTop
  },
  computed: {
    userInfo() {
      return this.$store.state.auth.user;
    },
    userName() {
      if (this.userInfo.userName === this.userInfo.userPhone) {
        let str = this.userInfo.userName;
        let str2 = str.substr(0, 3) + "****" + str.substr(7);
        return str2;
      } else {
        return this.userInfo.userName;
      }
    }
  },
  data() {
    return {
      orderIcons: [
        { icon: "pending-payment", name: "待付款" },
        { icon: "share", name: "待分享" },
        { icon: "clock", name: "待发货" },
        { icon: "logistics", name: "待收货" },
        { icon: "edit-data", name: "待评价" }
      ],
      middleIcons: [
        { icon: "coupon", name: "优惠券", link: "/coupons" },
        { icon: "goods-collect", name: "商品收藏", link: "/likes" },
        { icon: "shop-collect", name: "店铺收藏", link: "/mallCollection" },
        { icon: "browsing-history", name: "历史浏览", link: "/footprint" },
        { icon: "iconfont icon-caiwu", name: "退款/售后" }
      ],
      bottomIcons: [
        { icon: "iconfont icon-hongbao", name: "新人红包" },
        { icon: "point-gift", name: "邀请领红包" },
        { icon: "location", name: "收货地址", link: "/address" },
        { icon: "pending-evaluate", name: "我的评价" },
        { icon: "iconfont icon-kefu", name: "官方客服" },
        { icon: "iconfont icon-set", name: "设置", link: "/user/setting" }
      ],
      goodsList: null,
      hasMore: false,
      count: 20,
      offset: 0,
      scrollY: null
    };
  },
  methods: {
    toOrders() {
      this.$router.push({ path: "/orders" });
    },
    toProfile() {
      if (this.userInfo && this.userInfo.userId) {
        this.$router.push({ path: "/user/profile" });
      } else {
        this.$router.push({ path: "/auth/login" });
      }
    },
    toLink(link) {
      this.$router.push({ path: link });
    },
    toTop() {
      this.$refs.scroll.scrollTo(0, 0, 500);
    },
    scroll(pos) {
      this.scrollY = -pos.y;
    },
    loadMore() {
      let offset = (this.offset += this.count);
      recproductList(this.count, offset).then(res => {
        this.goodsList = this.goodsList.concat(res.data.data);
        this.hasMore = res.data.has_more;
      });
    },
    initData() {
      recproductList(this.count, this.offset).then(res => {
        this.goodsList = res.data.data;
        this.hasMore = res.data.has_more;
      });
    }
  },
  created() {
    this.initData();
  }
};
</script>

<style lang="less" scoped>
.userCenter {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  .user-scroll {
    height: 100%;
    overflow: hidden;
  }
  .user-header {
    position: relative;
    padding: 0.15rem 0.16rem 0 0.14rem;
    background-color: #fff;
    .user-info {
      display: flex;
      align-items: center;
      position: relative;
      img {
        width: 0.64rem;
        height: 0.64rem;
        border-radius: 100%;
        margin-right: 0.12rem;
      }
      .user-name {
        display: flex;
        align-items: center;
        color: #151516;
        font-size: 0.19rem;
      }

      .btn {
        position: absolute;
        right: 0;
        height: 0.29rem;
        background-color: #fff;
        border-radius: 0.145rem;
        font-size: 0.13rem;
        color: #151516;
        border: 1px solid hsla(0, 0%, 61%, 0.6);
        span {
          padding: 0 0.12rem 0 0.1rem;
          height: 100%;
          line-height: 0.29rem;
        }
      }
    }
    .pincard-entrance {
      position: relative;
      height: 0.44rem;
      padding: 0 0.12rem 0 0.1rem;
      margin-top: 0.14rem;
      line-height: 0.44rem;
      background: #ffeee1
        url(https://pinduoduoimg.yangkeduo.com/personal/pincard-entry-bg.png);
      background-size: contain;
      border-radius: 0.08rem 0.08rem 0 0;
      color: #cb3e46;
      font-size: 0.15rem;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      .info-list {
        display: flex;
        align-items: center;
        span {
          display: flex;
          align-items: center;
        }
        img {
          width: 0.28rem;
          height: 0.28rem;
          margin-right: 0.05rem;
        }
      }
    }
  }
  .user-order {
    background: #fff;
    padding-bottom: 0.07rem;
  }
  .middle-wrapper {
    background-color: #fff;
    margin-top: 0.08rem;
  }
  .bottom-wrapper {
    background-color: #fff;
    margin-top: 0.08rem;
    .bottom-menu {
      height: 1.54rem;
      display: flex;
      flex-wrap: wrap;
      .bottom-menu-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 25%;
        p {
          margin-top: 0.12rem;
          color: #58595b;
          font-size: 0.13rem;
        }
      }
    }
  }
  .menu {
    height: 0.77rem;
    display: flex;
    flex-wrap: wrap;
    .menu-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 20%;
      p {
        margin-top: 0.12rem;
        color: #58595b;
        font-size: 0.13rem;
      }
    }
  }
}
</style>

<style lang="less">
.van-cell {
  padding: 10px 15px 0 15px;
  .van-cell__title {
    font-size: 0.17rem;
  }
  .van-cell__value {
    color: #999;
  }
}
</style>
